///
///  简单案例
///
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

/// 实现底部Tab切换
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation Bar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavigationBarExample(),
    );
  }
}

class BottomNavigationBarExample extends StatefulWidget {
  const BottomNavigationBarExample({super.key});

  @override
  _BottomNavigationBarExampleState createState() => _BottomNavigationBarExampleState();
}

class _BottomNavigationBarExampleState extends State<BottomNavigationBarExample> {
  int _selectedIndex = 0; // 当前选中的Tab索引

  // 定义Tab页面
  static const List<Widget> _widgetOptions = <Widget>[
    App1(),
    App2(),
    App3(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('底部导航栏示例'),
      ),
      body: Center(
        // 根据选中的Tab显示对应的内容
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '图形变换按钮',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: '画一个按钮',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '显示本地图片',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped, // 点击Tab时触发的回调
      ),
    );
  }
}

/// 一个简单的图形
class App1 extends StatelessWidget {
  const App1({super.key});

  @override
  Widget build(BuildContext context) {

    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        // 容器的装饰效果，包括背景色、渐变、边框、阴影等
        decoration: BoxDecoration(
            color: Colors.yellow,
            // 背景线性渐变
            gradient: const LinearGradient(colors: [Colors.red, Colors.orange]),
            // 阴影
            boxShadow: const [
              BoxShadow(
                color: Colors.blue,
                offset: Offset(2.0,2.0),
                blurRadius: 10.0,
              )
            ],
            // 边框
            border: Border.all(
                color: Colors.black,
                width: 1
            )
        ),
        // 性用于对容器进行变换操作，包括旋转、缩放和平移等。
        // rotationZ: 绕Z轴旋转0.3弧度
        transform: Matrix4.rotationZ(.3),
        child: const Text('你好 Flutter', style: TextStyle(fontSize: 20),),
      ),
    );
  }
}

///  一个按钮
class App2 extends StatelessWidget {
  const App2({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 40,
        width: 200,
        decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(15)
        ),
        child: const Text(
          '按钮',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

///  显示图片
class App3 extends StatelessWidget {
  const App3({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      // ClipOval裁剪其子组件为椭圆形
        child: ClipOval(
          child: Image.asset('assets/images/welcome01.png',
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
        )
    );
  }
}

// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Flutter Demo',
//       theme: ThemeData(
//         primarySwatch: Colors.blue,
//         visualDensity: VisualDensity.adaptivePlatformDensity,
//       ),
//       home: MyHomePage(),
//     );
//   }
// }
//
// class MyHomePage extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: Text('Flutter Demo Home Page'),
//       ),
//       body: App1(),
//     );
//   }
// }
//
